<template>
	<div class="OrderDelivery" v-model="order">
		<van-sticky>
			<div class="orderdetail_dir">
				<i class="iconfont" style="font-size: 20px;margin: 10px 20px;" @click="backtoorder">&#xe649;</i>
				<i class="iconfont" style="font-size: 20px;margin: 10px 20px ;position: fixed; right:0; ">&#xe648;</i>
			</div>
			<div class="orderdetail_state" >
				<span>订单{{order.orderState.constant_term_meaning}}</span>
				
			</div>
		</van-sticky>
		<div class="ordertopay_dir">
			<div> 
				<span v-show="showorder">预计<span >{{hour}}:{{minute}}</span>送达</span>
				<span v-show="showcommon">订单已送达~</span>
				<div class="hr"></div>
			</div>
			
			<div>
				<div v-show="showorder" class="ordertopay_op_model" style="color: #f18f16;" @click="okorder">
					<div><i class="iconfont">&#xe637;</i> </div>
					<div style="color: #f18f16;">确认收货</div>
				</div>
				<div v-show="showcommon" class="ordertopay_op_model" style="color: #f18f16;" @click="tojudge">
					<div><i class="iconfont">&#xe637;</i> </div>
					<div style="color: #f18f16;">去评价</div>
				</div>
				
				<div class="ordertopay_op_model">
					<div><i class="iconfont">&#xe64c;</i> </div>
					<div>联系商家</div>
				</div>
			</div>
			
			
		</div>
		<div class="orderdetail_order">
			<div>
				咚咚哒哒美食店
			</div>

			<div class="hr" />

			<div class="foods_box" v-for="food in fooddetail">
				<div>
					<van-image fit="cover" radius="10px" width="4rem" height="4rem" 
					:src="`http://localhost:8080/res/${food.food.food_img}`" style="margin: auto;" />
				</div>
				<div>
					<span>{{food.food_name}}</span>
					<span>口味：{{food.detail_attach}}</span>
					<span>x{{food.food_amount}}</span>
				</div>
				<div>
					<span>&yen;{{food.food_total}}</span>
				</div>
			</div>
			<div class="orderdetail_order_border">
				<div class="hr" />
				<div class="other-and-summary">
					<div class="packing-expense">
						<div class="wordfont"><span>包装费</span></div>
						<div class="moneyfont"><span>&yen;2</span></div>
					</div>
					<div class="freight">
						<div class="wordfont"><span>运费</span></div>
						<div class="moneyfont"><span>&yen;2</span></div>
					</div>
					<!-- <div class="red-packet">
						<div class="wordfont"><span>红包</span></div>
						<div class="moneyfont"><span>&yen;3</span></div>
					</div>
					<div class="integral">
						<div class="wordfont"><span>积分</span><span style="margin-left: 20px;">250</span></div>
						<div class="moneyfont"><span>&yen;10</span></div>
					</div> -->

					<div class="hr" />
					<div class="discount">
						<div >
							<span>已优惠</span>
							<span>&yen;{{discount}}</span>
							<span>共计</span>
							<span>&yen;{{order.order_true_price}}</span>
						</div>
					</div>
				</div>
			</div>

			<div class="order_tel_model">
				<div style="border-right:1px solid #ffffff">
					<i class="iconfont">&#xe661;</i>
					联系商家
				</div>
				<div>
					<i class="iconfont">&#xe64c;</i>
					致电商家
				</div>
			</div>
		</div>


		<div class="orderdetail_delivery">
			<div>
				配送信息
			</div>
			<div class="hr" />
			<div class="orderdetail_delivery_border">
				<div class="orderdetail_delivery_msg">
					<div class="packing-expense">
						<div class="wordfontgrey"><span>期望时间</span></div>
						<div class="wordfont"><span>立即配送</span></div>
					</div>
					<div class="freight">
						<div class="wordfontgrey" style="word-break:keep-all; "><span>配送地址</span></div>
						<div class="wordfont" style="text-align:right">
							<span>
								{{this.order.userAddress.receiver_address}}
								{{this.order.userAddress.receiver_telephone}}
								{{this.order.userAddress.receiver_name}}
							</span>
						</div>
					</div>
					<div class="red-packet">
						<div class="wordfontgrey"><span>配送服务</span></div>
						<div class="wordfont"><span>咚咚专线</span></div>
					</div>
					
				</div>
			</div>
			
		</div>
		<!--配送信息-->
		<div class="orderdetail_info">
			<div>
				订单信息
			</div>
			<div class="hr" />
			<div class="orderdetail_delivery_border">
				<div class="orderdetail_delivery_msg">
					<div class="packing-expense">
						<div class="wordfontgrey"><span>订单号码</span></div>
						<div class="wordfont"><span>{{order.order_id}}</span></div>
					</div>
					<div class="freight">
						<div class="wordfontgrey" style="word-break:keep-all; "><span>下单时间</span></div>
						<div class="wordfont" style="text-align:right"><span>{{order.order_create_time}}</span></div>
					</div>
					<div class="red-packet">
						<div class="wordfontgrey"><span>支付方式</span></div>
						<div class="wordfont"><span>{{paystyle.constant_term_meaning}}</span></div>
					</div>
				</div>
			</div>
	
		</div>
		<!--底部提示-->
		<div  v-show="showorder">
		<van-divider>美味即将出炉~</van-divider>
		</div>
		<div v-show="showcommon">
		<van-divider>快去评论吧~</van-divider>
		</div>
		
	</div>
</template>

<script>
	import OrderDetailService from './OrderDetailService.js'
	import { Notify } from 'vant';
	export default {
		name: "OrderDelivery",
		data() {
			return {
				showorder:true,
				showcommon:false,
				order:'',//传过来的订单
				order_id:'',//订单id
				discount:'',//优惠信息
				paystyle:'',//支付方式
				fooddetail: '',//菜品详情？？
				
				orderpaytime:'',//订单支付时间
				
				minute:'',
				hour:'',
				
				url: 'https://img.yzcdn.cn/vant/cat.jpeg',
				time:  15 * 60 * 1000,
			};
		},
		 
		created(){
			this.order = this.$route.params.order;
			this.order_id=this.order.order_id
			if(this.order.status==17){
				this.showorder=false;
				this.showcommon=true;
			}
			console.log(this.order)
			this.axios.get(`http://localhost:8080//goodorderdetail/getorderdetail/`+this.order_id).then(res => {
				this.fooddetail = res.data.usergoodorderlist;
				console.log(this.fooddetail)
			})
			
			
			//计算送达时间
			this.orderpaytime=this.order.order_pay_time//订单支付时间
			let payTime = new Date(this.orderpaytime);
			let min = payTime.getMinutes();
			payTime.setMinutes(min + 40);
			
			this.hour=payTime.getHours();
			this.minute=payTime.getMinutes();
			
		},
		mounted() {
			this.paystyle=this.order.payStyle;
			//console.log(this.paystyle)
			this.discount=parseFloat((this.order.order_original_price-this.order.order_true_price).toFixed(2));
			//console.log(this.discount)
		},
		methods:{
			backtoorder(){
				this.$router.replace('/order');
			},
			//确认收货
			okorder(){
				let goodOrder = this.order;
				goodOrder.status=17;
				OrderDetailService.uodateGoodOrderService(goodOrder,res=>{
					console.log(res);
				});
				Notify({ type: 'success', message: '收货成功' });
				this.$router.replace('/order');
				
			},
			//支付订单
			payorder(){
				this.$router.push({
				name: 'PayOrder',
				params: {
					order:this.order,
				}
				})
			},
			//去评论订单
			tojudge(){
				this.$router.push({
				name: 'Evaluation',
				params: {
					order:this.order,
				}
				})
			}
			
		}
	}
</script>

<style lang="less">
	/*左右留10 中间留15*/
	.OrderDelivery {
		width: 100%;
		//background-color: lightblue;

		.orderdetail_dir {
			height: 50px;
			display: flex;
			border: 1px solid #f3f3f3;
			background-color: #f3f3f3;
		}

		.orderdetail_state {
			height: 60px;
			display: flex;
			background-color: #f3f3f3;
			>span {
				&:nth-child(1) {
					margin: 15px 0 30px 30px;
					font-size: 24px;
					line-height: 24px; //行高
					color: #303133;
					font-weight: 400;
					letter-spacing: 1px;
				}
			}
		}
		//订单去支付提示
		.ordertopay_dir{
			margin: 10px ;
			height: 120px;
			border-radius: 10px;
			background-color: white;
			display: flex;
			flex-direction: column;
			>div{
				flex: 1;
				&:nth-child(1){
					font-size: 22px;
					//line-height: 16px;
					color: #303133; 
					font-weight: 600; 
					letter-spacing: 2px;
					margin: 10px 0 0 15px;
				}
				&:nth-child(2){
					display: flex;
					>div{
						flex: 1;
					}
				}
			}
		}
		.orderdetail_order {
			margin: 10px;
			//height: 600px;
			border-radius: 10px;
			background-color: white;
			display: flex;
			flex-direction: column;

			>div {
				&:nth-child(1) {
					//咚咚哒哒美食店
					margin: 10px 0 0 15px;
					font-family: "Helvetica Neue";
					font-size: 16px;
					line-height: 20px;
					color: #303133;
					font-weight: 700;
					letter-spacing: 2px;

				}
			}
			//订单详情框框
			.orderdetail_order_border {
				margin: 15px;
			}
		}

		//配送信息
		.orderdetail_delivery {
			margin: 10px;
			border-radius: 10px;
			background-color: white;
			display: flex;
			flex-direction: column;

			>div {
				&:nth-child(1) {
					//配送信息
					margin: 10px 0 0 15px;
					font-family: "Helvetica Neue";
					font-size: 16px;
					line-height: 20px;
					color: #303133;
					font-weight: 700;
					letter-spacing: 2px;
				}
			}
		}
		//订单信息卡片
		.orderdetail_info{
			margin: 10px;
			border-radius: 10px;
			background-color: white;
			display: flex;
			flex-direction: column;
			
			>div {
				&:nth-child(1) {
					//订单
					margin: 10px 0 0 15px;
					font-family: "Helvetica Neue";
					font-size: 16px;
					line-height: 20px;
					color: #303133;
					font-weight: 700;
					letter-spacing: 2px;
				}
			}
		}


		.orderdetail_delivery_border{
			margin: 0 15px 20px 15px;
		}
		//配送信息分开
		.orderdetail_delivery_msg {
			margin: 0 auto;
		
			>div {
				display: flex;
				justify-content: space-between;
				margin-top: 15px;
		
			}
		}
		//联系模块
		.order_tel_model {
			height: 50px;
			background-color: #f8f8f8;
			border-bottom-right-radius: 10px; //边框右上圆角
			border-bottom-left-radius: 10px;
			display: flex;
			>div {
				height: 50px;
				flex: 1;
				font-family: "Helvetica Neue";
				font-size: 18px;
				font-weight: 600; //加粗
				letter-spacing: 1px;
				line-height: 50px;
				text-align: center;
				//background-color: lightblue;
			}
		}







		//打包费用优惠 总价 引用类
		.other-and-summary {
			margin: 0 auto;

			>div {
				display: flex;
				justify-content: space-between;
				margin-top: 15px;

			}

			.discount {
				>div {
					margin-left: auto;

					>span {
						font-size: 15px;
						color: #303133; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: 1.5px;
						margin-left: 5px;

						&:nth-child(2) {
							margin-right: 10px;
							color: #e70c04;
						}

						&:nth-child(4) {
							font-size: 20px;
							//line-height: 18px;
							color: #4b4d50; //字体颜色
							font-weight: 300; //加粗
							letter-spacing: 1px;
						}
					}
				}
			}
		}


		//单独模块
		.ordertopay_op_model{
			margin: 0 20px;
			//background-color: lightblue;
			display: flex;
			flex-direction: column;
			align-items: center;
			div:nth-child(1){
				font-size:20px;
			}
			div:nth-child(2){
				font-size: 14px;
				color: #303133; 
				font-weight: 600; 
				letter-spacing: 1.5px;

			}
		}
		//菜品版
		.foods_box {
			//菜品
			height: 80px;
			display: flex;

			div:nth-child(1) {
				flex: 1;
				margin-left: 15px;
				//background-color: lightblue;
				display: flex;
			}

			div:nth-child(2) {
				flex: 4;
				display: flex;
				margin: 15px;
				flex-direction: column;
				justify-content: space-around;
				//background-color: lightcoral;
				text-align: left;

				>span {
					&:nth-child(1) {
						margin-top: 10px;
						font-size: 15px;
						line-height: 24px;
						color: #303133; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: 1px;
					}

					&:nth-child(2) {
						font-size: 13px;
						//line-height: 24px;
						color: #606266; //字体颜色
						letter-spacing: 1px;
					}

					&:nth-child(3) {
						font-size: 13px;
						line-height: 24px;
						color: #606266; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: 1px;
					}
				}
			}

			div:nth-child(3) {
				flex: 2;
				margin: 20px 15px 15px 0;
				text-align: right;

				>span {
					&:nth-child(1) {
						font-size: 20px;
						//line-height: 18px;
						color: #4b4d50; //字体颜色
						font-weight: 300; //加粗
						letter-spacing: 1px;
					}
				}
			}
		}
	
		//打包费..统一字体
		.wordfont {
			font-size: 15px;
			color: #303133; //字体颜色
			font-weight: 400; //加粗
			letter-spacing: 1px;
		}

		//灰色字体
		.wordfontgrey {
			font-size: 15px;
			color: #606166; //字体颜色
			font-weight: 400; //加粗
			letter-spacing: 1px;
		}

		//价格统一字体
		.moneyfont {
			font-size: 20px;
			//line-height: 18px;
			color: #4b4d50; //字体颜色
			font-weight: 300; //加粗
			letter-spacing: 1px;
		}

		//竖线
		.ln {
			width: 0;
			height: auto;
			border-left: 1px solid red;

			//height: 0px;
		}

		//横线
		.hr {
			border-bottom: 1px solid #e6e6e6;
			height: 0px;
			padding-bottom: 10px;

		}
	}
</style>
